<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const obj = {
            id:1,
            name:'贵儿',
            hobby:'学习~~'
        }

        // 需求，想让这个对象的某个属性变为响应式的 ==> 可监听的
        // ==> 当操作某个属性的时候，我们知道
        // key 属性名
        // value 属性值
        // obj.hobby = '玩耍'
        function defineReactive(obj, key, val){

            Object.defineProperty(obj, key , {
                configurable:true,
                enumerable:true, 
                // value / writable  ==> 不能和get和set搭配使用
                get(){
                    console.log('触发了getter函数')
                    return val
                },
                set(newVal){
                    console.log('触发了setter函数')
                    if (val === newVal) return 
                    val = newVal

                    // console.log(obj[key])
                    // // obj[key] = newVal
                }
            })
        }

        // 给一个对象设置，某个属性，并且这个属性是响应式的 
        // defineReactive(obj, 'hobby', '玩耍')

        defineReactive(obj, 'color', 'red')

        // obj['color'] = 'skyblue'
        // obj.color = 'skbylue'
    </script>
</body>
</html>